<template>
	<view class="team-container">
		<view class="header-container">
			<!-- <view class="cl-w">累计收益（元）</view> -->
			<!-- <view class="rechangeBtn " @click="$u.route('pages/creator/user/coin/withdrawal')">
				<view class="ft14 plr20">{{$t('share.withdraw')}}</view>
			</view> -->
			<view class="flex space alcenter mt5">
				<view class="data-num1" style="font-size: 20px;">{{$t('text.profit1')}}</view>
				<view class="flex alcenter" style="border: 1px solid #fff;padding: 6rpx 40rpx;border-radius: 60rpx;">
					<view class="" @click="$u.route('pages/creator/user/coin/withdrawal')">
						<view class="cl-w">{{$t('share.withdraw')}}</view>
					</view>
					<view class="ml10 mr10 bg-w" style="height: 26rpx;width: 1px;"></view>
					<view class="cl-w" @click="goEarning">{{$t('text.profit2')}}</view>
				</view>
				
			</view>
			<view class="flex space alcenter mt5">
				<view class="data-num1">{{money}}</view>
				<!-- <view class="cl-w" @click="goEarning">{{$t('text.profit2')}} ></view> -->
			</view>
			<view class="data-container">
				<view class="data-item">
					<view class="data-name">{{$t('text.profit3')}}</view>
					<view class="data-num">{{zong}}</view>
				</view>
				<view class="data-item">
					<view class="data-name">{{$t('text.profit4')}}</view>
					<view class="data-num">{{playEarning}}</view>
				</view>
			</view>
		</view>
		<!-- <title title="昨日收益"></title> -->
		<!-- <view class="title">
			<view class="cl-w">{{$t('text.profit5')}}</view>
		</view> -->
		<view class="mb20 cl-w">
			<view class="card-list" style="background: #171717;">
				<view class="card" style="padding: 0 30rpx 0 42rpx;">
					<view class="card-content">
						<view class="cl-w mt10">{{$t('text.profit5')}}</view>
						<view class="flex wrap plt15" style="gap: 30rpx;">
							<view class="flex alcenter col3 center plt10 "
								style="background-color: #1e1e1e;width: 30%;border-radius: 20rpx;"
								v-for="(item, index) in list">
								<image :src="getImageSrc(index)" mode="" style="width: 60rpx;height: 60rpx;"></image>
								<view class="text-center ml10">
									<view class="ft18">{{ item }}</view>
									<view class="ft12 cl-info2">{{ getText(index) }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- <view class="title">
			<view class="cl-w">{{$t('text.profit6')}}</view>
		</view> -->
		<view class="mb20 cl-w">
			<view class="card-list" style="background: #171717;">
				<view class="card1" style="padding: 0 30rpx 0 42rpx;">
					<view class="card-content">
						<view class="cl-w mt10">{{$t('text.profit6')}}</view>
						<view class="flex wrap plt15" style="gap: 30rpx;">
							<view class="flex alcenter col3 center plt10 "
								style="background-color: #1e1e1e;width: 30%;border-radius: 20rpx;"
								v-for="(item, index) in zrlist">
								<image :src="getImageSrc(index)" mode="" style="width: 60rpx;height: 60rpx;"></image>
								<view class="text-center ml10">
									<view class="ft18">{{ item }}</view>
									<view class="ft12 cl-info2">{{ getText(index) }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="plt10 flex space " v-for="(item,index) in zrlist">
				<view class="flex alcenter">
					<view class="flex alcenter" v-if="index==0">
						<image src="@/static/img/my/ad.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
						<view class="ml10" style="color: #2B95FC;">{{$t('text.gols1')}}</view>
					</view>
					<view class="flex alcenter" v-if="index==1">
						<image src="@/static/img/my/vip.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
						<view class="ml10" style="color: #2B95FC;">{{$t('text.huiyuan')}}</view>
					</view>
					<view class="flex alcenter" v-if="index==2">
						<image src="@/static/img/my/1img.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
						<view class="ml10" style="color: #2B95FC;">{{$t('navbar.watchds')}}</view>
					</view>
					<view class="flex alcenter" v-if="index==3">
						<image src="@/static/img/my/2img.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
						<view class="ml10" style="color: #2B95FC;">{{$t('text.bfl')}}</view>
					</view>
					<view class="flex alcenter" v-if="index==4">
						<image src="@/static/img/my/3img.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
						<view class="ml10" style="color: #2B95FC;">{{$t('text.profit7')}}</view>
					</view>
				</view>
				<view>{{item}}</view>
			</view> -->
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				cards: [{
						title: "卡片1",
						description: "卡片内容1"
					},
					{
						title: "卡片2",
						description: "卡片内容2"
					},
					{
						title: "卡片3",
						description: "卡片内容3"
					}
				],
				showSort: !1,
				month: "",
				money: 0,
				zong: 0,
				playEarning: 0,
				totalRevenue: 0,
				endYear: new Date().getFullYear(),
				list: [],
				zrlist: [],
				orderDetailType: 1,
				show: false,
				monthStr: '',
			}
		},
		onLoad() {
			this.$httpas.post2({
				data: {
					do: 'creator',
					op: 'shouyi_index',
					monthStr: this.monthStr,
				},
				success: res => {
					this.list = res.list
					this.zrlist = res.zrlist
					this.money = res.money
					this.zong = res.zong
					this.playEarning = res.playEarning
				}
			})
		},
		methods: {
			getImageSrc(index) {
				const images = [
					"/static/img/my/ad.png",
					"/static/img/my/vip.png",
					"/static/img/my/1img.png",
					"/static/img/my/2img.png",
					"/static/img/my/3img.png"
				];
				return images[index] || '';
			},
			getText(index) {
				const texts = [
					this.$t('text.gols1'),
					this.$t('text.huiyuan'),
					this.$t('navbar.watchds'),
					this.$t('text.bfl'),
					this.$t('text.profit7')
				];
				return texts[index] || '';
			},
			changeDetailType(e) {
				this.orderDetailType = e
			},
			confirm(e) {
				console.log(e)
				this.monthStr = uni.$u.timeFormat(e.value, 'yyyy年mm月');
				this.cancel()
			},
			cancel() {
				this.show = false
			},
			goEarning() {
				uni.navigateTo({
					url: '/pages/creator/user/team/earning'
				})
			}
		}
	}
</script>

<style lang="scss">
	.team-container {
		padding: 24rpx;
	}

	.header-container {
		background: linear-gradient(90deg, rgba(70, 174, 247, 1) 0%, rgba(48, 199, 236, 1) 53%, rgba(22, 217, 227, 1) 100%);
		border-radius: 16rpx;
		// height: 288rpx;
		padding: 24rpx;
		position: relative;
		width: 100%;
		z-index: 1;
		margin-bottom: 30rpx;
		color: #fff;
	}

	.header-container .right-bg {
		background-image: url(https://phone-res.jiaxianghui.cn/20221113175255-page-bg.eb3254be.png);
		background-repeat: no-repeat;
		background-size: 100%;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		width: 40%;
		z-index: -1;
	}

	.header-container .search-container {
		display: flex;
	}

	.header-container .search-container .tatal-earning {
		-webkit-box-flex: 1;
		-webkit-box-align: center;
		align-items: center;
		border-radius: 32rpx;
		color: #fff;
		display: flex;
		flex: 1;
		height: 64rpx;
		margin-right: 24rpx;
		padding: 0 4rpx;
	}

	.header-container .search-container .tatal-earning .unit {
		font-size: 24rpx;
		margin-right: 4rpx;
	}

	.header-container .search-container .tatal-earning .total-amount {
		-webkit-box-align: center;
		align-items: center;
		display: flex;
	}

	.header-container .search-container .tatal-earning .amount-text {
		font-weight: 700;
	}

	.header-container .search-container .data-container {
		-webkit-box-align: center;
		align-items: center;
		display: flex;
		margin-top: 20rpx;
		text-align: center;
	}

	.header-container .search-container .data-container .data-item {
		-webkit-box-flex: 1;
		flex: 1;
	}

	.header-container .search-container .data-container .data-item .data-name {
		color: #fff;
		font-size: 28rpx;
	}

	.header-container .search-container .data-container .data-item .data-num {
		color: #fff;
		font-size: 44rpx;
		font-weight: 700;
		margin-bottom: 12rpx;
	}

	.header-container .search-container .data-container .data-item:nth-child(1) {
		border-right: 1rpx solid #fff;
	}

	.header-container .search-container .sort {
		background: #fff;
		border-radius: 32rpx;
		font-size: 24rpx;
		height: 64rpx;
		line-height: 64rpx;
		padding: 0 40rpx 0 24rpx;
		position: relative;
		text-align: center;
		width: 200rpx;
	}

	.header-container .search-container .sort .arrow-down {
		bottom: 0;
		position: absolute;
		right: 20rpx;
		top: 0;
	}

	.header-container .team-tab {
		-webkit-box-flex: 1;
		-webkit-box-align: center;
		align-items: center;
		background: #fff;
		border-radius: 32rpx;
		display: flex;
		flex: 1;
		height: 64rpx;
		margin-right: 24rpx;
		padding: 0 4rpx;
	}

	.header-container .team-tab .team-tab-item {
		-webkit-box-flex: 1;
		background: transparent;
		border-radius: 30rpx;
		color: #333;
		flex: 1;
		font-size: 24rpx;
		height: 58rpx;
		line-height: 58rpx;
		padding: 0 24rpx;
		text-align: center;
		transition: .2s;
	}

	.header-container .team-tab .all {
		padding: 0;
		width: 120rpx;
	}

	.header-container .team-tab .active-item {
		background: linear-gradient(-90deg, #7275fb, #9598ff);
		color: #fff;
	}

	.header-container .data-container {
		-webkit-box-align: center;
		align-items: center;
		display: flex;
		margin-top: 20rpx;
		text-align: center;
	}

	.header-container .data-container .data-item {
		-webkit-box-flex: 1;
		flex: 1;
	}

	.header-container .data-container .data-item .data-name {
		color: #fff;
		font-size: 28rpx;
	}

	.header-container .data-container .data-item .data-num {
		color: #fff;
		font-size: 44rpx;
		font-weight: 700;
		margin-bottom: 12rpx;
	}

	.header-container .data-container .data-item:nth-child(1) {
		border-right: 1rpx solid #fff;
	}

	.members-container .earning-item {
		-webkit-box-align: center;
		align-items: center;
		border-radius: 16rpx;
		box-shadow: 0rpx 1rpx 10rpx 2rpx #d5dcf0;
		color: #333;
		margin-bottom: 24rpx;
		padding: 24rpx;
	}

	.members-container .earning-item .item-title {
		-webkit-box-pack: justify;
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;
		width: 100%;
	}

	.members-container .earning-item .item-title .date-time,
	.members-container .earning-item .item-title .earining-data {
		font-size: 28rpx;
		font-weight: 700;
	}

	.members-container .earning-item .item-title .total-num {
		color: #ef2222;
		font-weight: 700;
	}

	.members-container .earning-item .earning-detail-info {
		-webkit-box-align: center;
		align-items: center;
		background: #f0ecff;
		border-radius: 16rpx;
		display: flex;
		padding: 24rpx;
		text-align: center;
	}

	.members-container .earning-item .earning-detail-info .earning-detail-item {
		-webkit-box-flex: 1;
		flex: 1;
	}

	.members-container .earning-item .earning-detail-info .item-name {
		font-size: 24rpx;
		margin-bottom: 12rpx;
	}

	.members-container .earning-item .earning-detail-info .item-num {
		color: #7275fb;
		font-size: 24rpx;
	}

	.empty {
		text-align: center;
	}

	.data-num1 {
		color: #fff;
		font-size: 50rpx;
		font-weight: 700;
	}

	.title {
		-webkit-box-align: center;
		align-items: center;
		display: flex;
		font-size: 32rpx;
		font-weight: 700;
		margin-bottom: 40rpx;
		padding-left: 24rpx;
		position: relative;
	}

	.title::after {
		background: rgba(11, 144, 249, 1);
		border-radius: 2rpx;
		bottom: 6rpx;
		content: "";
		display: block;
		left: 0;
		margin: auto;
		position: absolute;
		top: 6rpx;
		width: 8rpx;
	}

	.card-list {
		display: flex;
		flex-direction: column;
	}

	.card,.card1 {
		width: 100%;
		background-color: #171717;
		border-radius: 16px;
		position: relative;
		overflow: hidden;
	}

	.card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 12rpx;
		height: 100%;
		background: linear-gradient(to bottom, #2DBCEE 0%, #399CEE 25%, #4878EE 50%, #5A4DEE 75%, #6531EE 100%);
	}
	
	.card1::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 12rpx;
		height: 100%;
		background: linear-gradient(to bottom, #C021AC 0%, #944DAA 25%, #726FAA 50%, #4998A8 75%, #21C0A7 100%);
	}
</style>